<template>
  <div class="containerDiv">
    <div class="treeDiv">
      <el-tree
        node-key="id"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        :allow-drag="allowDrag"
        :allow-drop="allowDrop"
        :render-content="renderContent"
      ></el-tree>
    </div>
    <div class="tableDiv tableScrollbar">
      <el-table
        ref="singleTable"
        :data="tableData"
        empty-text="暂无设备数据"
        class="tableList"
        :show-header="false"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="" label="" min-width="33.33%" max-width="33.33%">
          <template slot-scope="scope">
            <div class="deviceDiv" v-if="scope.row.device_id_1 > -1">
              <div class="subImg">
                <div class="imgDiv">
                  <img
                    id="thumbnail"
                    :src="scope.row.img_1"
                    alt=""
                    class="imgShow"
                    @click="
                      watchCamera(scope.row.device_id_1, scope.row.preview_1)
                    "
                  />
                </div>
              </div>
              <div class="subTitle">
                <div>
                  <span
                    style="float: left; margin-left: 12px; margin-top: 6px"
                    >{{ scope.row.name_1 }}</span
                  >
                </div>
                <div>
                  <span
                    style="float: right; margin-right: 12px; margin-top: 6px"
                    >{{ scope.row.onlineText_1 }}</span
                  >
                  <div class="onlineDiv" v-if="scope.row.online_1 == 1"></div>
                  <div class="offlineDiv" v-if="scope.row.online_1 == 0"></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" min-width="33.33%" max-width="33.33%">
          <template slot-scope="scope">
            <div class="deviceDiv" v-if="scope.row.device_id_2 > -1">
              <div class="subImg">
                <div class="imgDiv">
                  <img
                    id="thumbnail"
                    :src="scope.row.img_2"
                    alt=""
                    class="imgShow"
                    @click="
                      watchCamera(scope.row.device_id_2, scope.row.preview_2)
                    "
                  />
                </div>
              </div>
              <div class="subTitle">
                <div>
                  <span
                    style="float: left; margin-left: 12px; margin-top: 6px"
                    >{{ scope.row.name_2 }}</span
                  >
                </div>
                <div>
                  <span
                    style="float: right; margin-right: 12px; margin-top: 6px"
                    >{{ scope.row.onlineText_2 }}</span
                  >
                  <div class="onlineDiv" v-if="scope.row.online_2 == 1"></div>
                  <div class="offlineDiv" v-if="scope.row.online_2 == 0"></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" min-width="33.33%" max-width="33.33%">
          <template slot-scope="scope">
            <div class="deviceDiv" v-if="scope.row.device_id_3 > -1">
              <div class="subImg">
                <div class="imgDiv">
                  <img
                    id="thumbnail"
                    :src="scope.row.img_3"
                    alt=""
                    class="imgShow"
                    @click="
                      watchCamera(scope.row.device_id_3, scope.row.preview_3)
                    "
                  />
                </div>
              </div>
              <div class="subTitle">
                <div>
                  <span
                    style="float: left; margin-left: 12px; margin-top: 6px"
                    >{{ scope.row.name_3 }}</span
                  >
                </div>
                <div>
                  <span
                    style="float: right; margin-right: 12px; margin-top: 6px"
                    >{{ scope.row.onlineText_3 }}</span
                  >
                  <div class="onlineDiv" v-if="scope.row.online_3 == 1"></div>
                  <div class="offlineDiv" v-if="scope.row.online_3 == 0"></div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="showFlvPlayDiv"
      @closed="handleFlvPlayDivClose"
      :show-close="false"
      width="70%"
    >
      <video
        id="videoFlvElement"
        controls
        preload="auto"
        autoplay
        width="100%"
        height="100%"
      >
        Your browser is too old which doesn't support HTML5 video.
      </video>
    </el-dialog>
  </div>
</template>
<script>
import flvjs from '../assets/js/flv.min.js'
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      device_data: [],
      tableData: [],
      statusTimer: '',
      updateThumbnailTimer: '',
      showFlvPlayDiv: false,
      flvPlayer: null,
    }
  },
  created() {
    this.getDevices()
    this.getCameras()
  },
  computed: {},
  mounted() {
    this.statusTimer = setInterval(this.getCamerasStatus, 10000)
    this.updateThumbnailTimer = setInterval(this.updateThumbnail, 10000)
  },
  beforeDestroy() {
    clearInterval(this.statusTimer)
    clearInterval(this.updateThumbnailTimer)
  },
  methods: {
    allowDrop(draggingNode, dropNode, type) {
      return false
    },
    allowDrag(draggingNode) {
      return false
    },
    formatUrl(oldUrl) {
      var reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
      var ip = reg.exec(window.location.href)[0]
      ip = '10.4.26.2'
      let newUrl = oldUrl.replace('127.0.0.1', ip)
      return newUrl
    },
    formatOnline(onlineValue) {
      if (onlineValue == 0) {
        return '离线'
      }
      return '在线'
    },
    renderContent(h, { node, data, store }) {
      return (
        <span>
          <i class={data.icon}></i>
          <span> {node.label}</span>
        </span>
      )
    },
    async getDevices() {
      const { data: res } = await this.$http.get('query_devices', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      if (res.code == '1000') {
        this.treeData = res.data
      }
    },
    async getCameras() {
      const { data: res } = await this.$http.get('query_cameras', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      res.data.forEach((row) => {
        row.preview = this.formatUrl(row.preview)
        row.thumbnail = this.formatUrl(row.thumbnail)
        row.onlineText = this.formatOnline(row.online)
      })
      if (res.data == null) {
        this.tableData = []
      } else {
        this.device_data = res.data

        this.tableData = []
        for (let index = 0; index < this.device_data.length; index += 3) {
          let tmp_row = {}
          const element1 = this.device_data[index]
          tmp_row.device_id_1 = element1.device_id
          tmp_row.name_1 = element1.name
          tmp_row.img_1 = element1.thumbnail + '?t=' + Math.random()
          tmp_row.online_1 = element1.online
          tmp_row.onlineText_1 = element1.onlineText
          tmp_row.preview_1 = element1.preview

          if (index + 1 < this.device_data.length) {
            const element2 = this.device_data[index + 1]
            tmp_row.device_id_2 = element2.device_id
            tmp_row.name_2 = element2.name
            tmp_row.img_2 = element2.thumbnail + '?t=' + Math.random()
            tmp_row.online_2 = element2.online
            tmp_row.onlineText_2 = element2.onlineText
            tmp_row.preview_2 = element2.preview
          } else {
            tmp_row.device_id_2 = -1
          }

          if (index + 2 < this.device_data.length) {
            const element3 = this.device_data[index + 2]
            tmp_row.device_id_3 = element3.device_id
            tmp_row.name_3 = element3.name
            tmp_row.img_3 = element3.thumbnail + '?t=' + Math.random()
            tmp_row.online_3 = element3.online
            tmp_row.onlineText_3 = element3.onlineText
            tmp_row.preview_3 = element3.preview
          } else {
            tmp_row.device_id_3 = -1
          }

          this.tableData.push(tmp_row)
        }
      }
    },
    async getCamerasStatus() {
      const { data: res } = await this.$http.get('query_cameras', {
        params: {
          token: window.sessionStorage.getItem('token'),
        },
      })
      res.data.forEach((row) => {
        row.onlineText = this.formatOnline(row.online)
      })
      if (res.data != null) {
        var devices = res.data
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].online_1 != devices[i * 3].online) {
            this.tableData[i].online_1 = devices[i * 3].online
            this.tableData[i].onlineText_1 = devices[i * 3].onlineText
          }
          if (
            this.tableData[i].device_id_2 != -1 &&
            this.tableData[i].online_2 != devices[i * 3 + 1].online
          ) {
            this.tableData[i].online_2 = devices[i * 3 + 1].online
            this.tableData[i].onlineText_2 = devices[i * 3 + 1].onlineText
          }
          if (
            this.tableData[i].device_id_3 != -1 &&
            this.tableData[i].online_3 != devices[i * 3 + 2].online
          ) {
            this.tableData[i].online_3 = devices[i * 3 + 2].online
            this.tableData[i].onlineText_3 = devices[i * 3 + 2].onlineText
          }
        }
      }
    },
    updateThumbnail() {
      for (let i = 0; i < this.tableData.length; i++) {
        var url1 = this.tableData[i].img_1.split('?')[0]
        this.tableData[i].img_1 = url1 + '?t=' + Math.random()

        if (this.tableData[i].device_id_2 != -1) {
          var url2 = this.tableData[i].img_2.split('?')[0]
          this.tableData[i].img_2 = url2 + '?t=' + Math.random()
        }

        if (this.tableData[i].device_id_3 != -1) {
          var url3 = this.tableData[i].img_3.split('?')[0]
          this.tableData[i].img_3 = url3 + '?t=' + Math.random()
        }
      }
    },
    async activeCamera(deviceId) {
      const { data: res } = await this.$http.put(
        'active_camera',
        { device_id: deviceId },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code == '1000') {
      }
    },
    async inactiveCamera(deviceId) {
      const { data: res } = await this.$http.put(
        'inactive_camera',
        { device_id: deviceId },
        {
          params: {
            token: window.sessionStorage.getItem('token'),
          },
        }
      )
      if (res.code == '1000') {
      }
    },
    watchCamera(device_id, httpflvUrl) {
      this.active_device_id = device_id
      this.activeCamera(this.active_device_id)
      this.showFlvPlayDiv = true
      setTimeout(() => {
        var player = document.getElementById('videoFlvElement')
        if (flvjs.isSupported()) {
          if (this.flvPlayer != null) {
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
          }
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: httpflvUrl,
          })
          this.flvPlayer.attachMediaElement(player)
          this.flvPlayer.load()
        }
      }, 300)
    },
    handleFlvPlayDivClose() {
      this.showFlvPlayDiv = false
      if (flvjs.isSupported()) {
        if (this.flvPlayer != null) {
          this.flvPlayer.unload()
          this.flvPlayer.detachMediaElement()
          this.flvPlayer.destroy()
          this.flvPlayer = null
        }
      }
      this.inactiveCamera(this.active_device_id)
    },
  },
}
</script>
<style lang="less" scoped>
.containerDiv {
  display: flex;
  height: 100%;
  background: #201f1f;
}
.treeDiv {
  width: 260px;
  height: 100%;
  float: left;
  background: #1a1919;
}
video::-webkit-media-controls {
  object-fit: fill;
  display: none !important;
}
video {
  object-fit: fill;
}

/* 设置树形最外层的背景颜色和字体颜色 */
.el-tree {
  color: #b8b8b8;
  font-size: 16px;
  background: transparent;
}
/* 树节点鼠标悬浮式改变背景色，字体颜色 */
/deep/ .el-tree-node__content:hover {
  background-color: #3acaff;
  color: #434647;
}
/* 改变被点击节点背景颜色，字体颜色 */
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background-color: #3acaff;
  color: #434647;
}
/* 改变节点高度 */
/deep/ .el-tree-node__content {
  height: 36px !important;
}
.tableDiv {
  width: 100%;
  margin: 10px;
  overflow: auto;
}
.tableList {
  width: 100%;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #878787;
  border-collapse: separate;
  overflow: auto;
  background: transparent;
}
.tableScrollbar::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
.tableScrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #151414;
}
.tableScrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #201f1f;
}
/deep/ .el-table__empty-text {
  line-height: 60px;
  width: 50%;
  color: #878787;
}
.el-table::before {
  height: 0px;
}
.deviceDiv {
  background: #201f1f;
}
.deviceDiv:hover {
  cursor: pointer;
}
.subImg {
  display: flex;
  margin: 0 auto;
  // margin: 5px 5px 0 5px;
  overflow: hidden;
  //margin: 0 100px 0 100px;
}
.imgDiv {
  width: 100%;
  margin: 0px;
}
.imgShow {
  width: 100%;
  height: 100%;
}
.subTitle {
  height: 36px;
  font-size: 14px;
  font-weight: 400;
  color: #c6c4c4;
  background-color: #151414;
}
.el-table /deep/ td,
.el-table /deep/ th.is-leaf {
  border: 0px !important;
  background-color: #201f1f !important;
}
.el-table /deep/ tbody tr:hover > td {
  background-color: #201f1f !important;
}
.el-table /deep/ tbody tr:hover {
  background-color: #201f1f !important;
}
.onlineDiv {
  margin: 12px 6px 0 0;
  width: 12px;
  height: 12px;
  background-image: url(../assets/online.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  float: right;
}
.offlineDiv {
  margin: 12px 6px 0 0;
  width: 12px;
  height: 12px;
  background-image: url(../assets/offline.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  float: right;
}
/deep/ .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background-image: url(../assets/default.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/deep/ .el-dialog__body {
  transform: translate3d(0, 0, 0);
  overflow: auto;
  padding: 0px !important;
  margin-bottom: -10px;
}
/deep/ .el-dialog__header {
  padding: 0px !important;
  border-bottom: 0px solid #f4f4f4;
}
/deep/ .el-dialog__footer {
  text-align: center !important;
  padding: 0px !important;
  border: 0px;
  margin: 0px;
}
/deep/ .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
